<template>
  <rx-layout>
    <div slot="left" width="200" showButton="true">
      <a-directory-tree
        :show-icon="true"
        :treeData="proprertiesGroup"
        @select="selectNode"
      >
      </a-directory-tree>
    </div>
    <div slot="center" style>
      <rx-fit :isheader="isheader">
        <div slot="toolheader" foldheader="true" foldbtn="false" border="false">
          <div class="table-operator">
            <rx-button alias="osPropertiesDefAdd" :butn-icon="'plus'" :butn-type="'primary'" :show-no-right="true" @click="add">{{$ti18('rxList.newBtn','新建')}}</rx-button>
            <a-dropdown v-if="removeEnable && selectedRowKeys.length > 0 && editEnable && selectedRowKeys.length > 0">
              <a-button style="margin-left: 8px"> {{$ti18('rxList.moreBtn','更多')}} <a-icon type="down" /> </a-button>
              <a-menu slot="overlay">
                <a-menu-item
                  key="1"
                  @click="editOne"
                  v-if="editEnable && selectedRowKeys.length > 0"
                  alias="formRuleEdit"
                  :butn-type="'primary'"
                  :show-no-right="false"
                >
                  <a-icon type="edit" />{{$ti18('rxList.editBtn','编辑')}}
                </a-menu-item>
                <a-menu-item
                  key="2"
                  @click="delByIds(selectedRowKeys)"
                  v-if="removeEnable && selectedRowKeys.length > 0"
                  alias="formRuleDelete"
                  :butn-type="'danger'"
                  :show-no-right="false"
                >
                  <a-icon type="delete" />{{$ti18('rxList.delBtn','删除')}}
                </a-menu-item>
              </a-menu>
            </a-dropdown>
          </div>
          <span class="search-btn-box"  v-if="!isheader">
            <span class="search-btn" @click.stop="searchshow"><i class="iconfont iconguolv"></i>{{$ti18('rxList.leachBtn','过滤')}}</span>
          </span>
        </div>
        <div  btnalign="right" slot="searchbar" v-if="fitSearch" @search="search" @cancel="cancel" @close="closeSearchbar">
          <a-form :layout="colLayout">
            <a-row :gutter="24">
              <a-col :span="colSpan">
             <a-form-item :label="i18n('form.paraName','参数名称')">
                    <a-input :placeholder="i18n('form.paraName','参数名称','input')" v-model="queryParam.Q_NAME__S_LK"/>
                  </a-form-item>
              </a-col>
              <a-col :span="colSpan">
             <a-form-item :label="i18n('form.xAttrsType','扩展属性类型')">
                    <a-select :placeholder="i18n('form.xAttrsType','扩展属性类型','select')" @change="onChange" v-model="xAttrsType">
                      <a-select-option value="user">{{i18n('user','用户')}}</a-select-option>
                      <a-select-option value="group">{{i18n('group','组织')}}</a-select-option>
                    </a-select>
                  </a-form-item>
              </a-col>
            </a-row>
          </a-form>
        </div>
        <rx-grid
          ref="table"
          :allowRowSelect="true"
          :multiSelect="true"
          :columns="columns"
          :defaultPageSize="10"
          url="/api-user/user/org/osPropertiesDef/query"
          :queryParam="queryParam"
          data-field="result.data"
          :pageSizeOptions="['10','30','40']"
          id-field="id"
          @selectChange="onSelectChange"
        >
          <span slot="ctltype" slot-scope="{text,record, index}">
           <span>{{ctltypes[text].text}}</span>
          </span>
          <span slot="dataType" slot-scope="{text,record, index}">
           <span>{{dataTypes[text].text}}</span>
          </span>
          <span slot="isDim" slot-scope="{text,record, index}">
           <span v-if="text">{{i18n('group','组织')}}</span>
           <span v-else>{{i18n('user','用户')}}</span>
          </span>
          <span slot="action" slot-scope="{ text, record }" class="actionIcons">
            <span v-if="editEnable && showBtn(false)" @click="edit(record)">{{$ti18('rxList.editBtn','编辑')}}</span>
            <span v-if="removeEnable && showBtn(false)"  @click="delByIds([record.id])">{{$ti18('rxList.delBtn','删除')}}</span>
          </span>
        </rx-grid>
      </rx-fit>
    </div>
  </rx-layout>
</template>

<script>
  import OsPropertiesDefApi from '@/api/user/org/osPropertiesDef'
  import osPropertiesGroupApi from '@/api/user/org/osPropertiesGroup'
  import OsPropertiesDefEdit from './OsPropertiesDefEdit'
  import {BaseList, Util} from "@lowcode/jpaas-common-lib";

  export default {
    name: 'OsPropertiesDefList',
    mixins: [BaseList],
    data() {
      return {
        proprertiesGroup: [],
        curRowId: "",
        isTreeCat: false,
        ctltypes: {
          "text": {text: this.i18n('textControl','文本控件')},
          "date": {text: this.i18n('dateControl','时间控件')},
          "select": {text: this.i18n('dropDownBox','下拉框')},
          "radio": {text: this.i18n('radio','单选框')}
        },
        dataTypes: {
          "varchar": {text:this.i18n('varchar','字符串')},
          "number": {text: this.i18n('number','数字')},
          "date": {text: this.i18n('date','日期')}
        },
        columns: [
          {
            title: this.$ti18('rxList.index','序号'),
            type: 'indexColumn',
            width: 60,
            dataIndex: 'serial',
            scopedSlots: {customRender: 'serial'}
          },
          {title: this.i18n('form.paraName','参数名称'), dataIndex: 'name', width: 100},
          {title: this.i18n('form.controlType','控件类型'), dataIndex: 'ctltype', width: 100, scopedSlots: {customRender: 'ctltype'}},
          {title: this.i18n('form.dataType','数据类型'), dataIndex: 'dataType', width: 100, scopedSlots: {customRender: 'dataType'}},
          {title: this.i18n('form.xAttrsType','扩展属性类型'), dataIndex: 'isDim', width: 100,scopedSlots: {customRender: 'isDim'}},
          {title: this.$ti18('rxList.action','操作'), width: 100, dataIndex: 'action', scopedSlots: {customRender: 'action'}}
        ],
        component: OsPropertiesDefEdit,
        comment: this.i18n('list.customAttrConfig','自定义属性配置'),
        widthHeight: ['800px', '500px'],
        xAttrsType:""
      }
    },
    created() {
      this.getPropertiesGroup();
    },
    methods: {
      i18n(name,text,key){
            return this.$ti18(name,text,"osPropertiesDef",key);
      },
      delById(ids){
        return OsPropertiesDefApi.del({ ids: ids.join(',') });
      },
      getPropertiesGroup() {
        osPropertiesGroupApi.query({}).then(res => {
          for (var i = 0; i < res.data.length; i++) {
            this.proprertiesGroup.push({
              title: res.data[i].name, key: res.data[i].id
            })
          }
        });
      },
      getListByParams(parameter) {
        return OsPropertiesDefApi.query(parameter);
      },
      handleSelect(selectedKeys, info) {
        var selectId = selectedKeys[0];
        var parameter = {
          pageNo: 1,
          pageSize: 20,
          sortField: "",
          sortOrder: "asc",
          params: {Q_ROUTE_TYPE__S_LK: selectId}
        };
      },
      selectNode(selKeys, e) {
        this.selectedRowKeys=[];
        this.selectedRows=[];
        this.queryParam.Q_GROUP_ID__S_EQ = e.node._props.dataRef.key;
        this.$refs.table.loadData();
      },
      onChange(value){
        var queryParam={};
        if("user"==value){
          queryParam.Q_NAME__S_LK= this.queryParam.Q_NAME__S_LK;
          queryParam.Q_DIM_ID__S_EQ= '-1';
          this.queryParam = queryParam;
        }else {
          queryParam.Q_NAME__S_LK= this.queryParam.Q_NAME__S_LK;
          queryParam.Q_DIM_ID__S_NEQ= '-1';
          this.queryParam = queryParam;
        }
      },
       search(){
         this.$refs.table.loadData();
      },
      cancel(){
        //清空过滤条件
        this.xAttrsType = "";
        this.resetSearch();
      },
      closeSearchbar(){
        //关闭过滤弹窗；（点击X触发）
        this.fitSearch = false ;
      },
    }
  }
</script>
<style scoped>

</style>

